import { createApp } from 'vue'
import { createVuestic } from 'vuestic-ui'
import 'vuestic-ui/css'
import './style.css'
import './assets/colors.css'
import App from './App.vue'
import router from './router'
import { authPlugin } from './plugins/auth'

// 导入 Material Icons 样式
import 'material-design-icons-iconfont/dist/material-design-icons.css'

const app = createApp(App)

// 注册认证插件，确保在其他插件之前注册
app.use(authPlugin)
app.use(router)
app.use(createVuestic({
  // 配置 Vuestic UI 使用 Material Design 图标
  icons: {
    // 使用 Material Design 图标集
    aliases: {
      // 导航和交互
      search: 'search',
      home: 'home',
      arrow_forward: 'arrow_forward',
      arrow_back: 'arrow_back',
      arrow_up: 'arrow_upward',
      arrow_down: 'arrow_downward',
      arrow_right: 'keyboard_arrow_right',
      arrow_left: 'keyboard_arrow_left',
      
      // 表情包相关
      favorite: 'favorite',
      visibility: 'visibility',
      calendar_today: 'today',
      download: 'file_download',
      share: 'share',
      add_photo_alternate: 'add_photo_alternate',
      file_download: 'file_download',
      
      // 状态和通知
      sentiment_dissatisfied: 'sentiment_dissatisfied',
      info: 'info',
      warning: 'warning',
      error: 'error',
      
      // 用户和认证
      login: 'login',
      logout: 'logout',
      lock: 'lock',
      person: 'person',
      cloud_upload: 'cloud_upload',
      admin_panel_settings: 'admin_panel_settings',
      refresh: 'refresh',
      
      // 分类和其他
      emoji_emotions: 'emoji_emotions',
      pets: 'pets',
      sports_esports: 'sports_esports',
      movie: 'movie',
      access_time: 'access_time',
      trending_up: 'trending_up'
    },
    fonts: [
      {
        name: 'material-icons',
        resolve: (icon) => ({ class: 'material-icons', content: icon }),
      },
    ]
  },
  config: {
    colors: {
      variables: {
        primary: '#019587',
        secondary: '#01415B',
        success: '#A6BC09',
        info: '#005148',
        danger: '#e74c3c',
        warning: '#f39c12',
        background: '#f4f4f4',
        dark: '#34495e',
        gray: '#bdc3c7'
      }
    }
  }
}))
app.mount('#app')
